<template>
	<view class="login-container">
		<view class="login-box">
			<view class="title">社区管理系统</view>
			<view class="subtitle">业主端登录</view>
			
			<!-- 登录方式选项卡 -->
			<view class="login-tabs">
				<view 
					v-for="(tab, index) in loginTabs" 
					:key="index"
					:class="['tab-item', currentTab === index ? 'active' : '']"
					@tap="switchTab(index)"
				>
					{{tab.name}}
				</view>
			</view>
			
			<!-- 账号密码登录 -->
			<view v-if="currentTab === 0" class="input-group">
				<view class="input-item">
					<image src="/static/username.png" class="icon" />
					<input 
						type="text" 
						v-model="accountForm.username" 
						placeholder="请输入用户名"
						:adjust-position="false"
						:hold-keyboard="true"
						:focus="false"
						:confirm-type="'done'"
						:show-confirm-bar="false"
					/>
				</view>
				<view class="input-item">
					<image src="/static/password.png" class="icon" />
					<input 
						type="password" 
						v-model="accountForm.password" 
						placeholder="请输入密码"
						:adjust-position="false"
						:hold-keyboard="true"
						:focus="false"
						:confirm-type="'done'"
						:show-confirm-bar="false"
					/>
				</view>
			</view>
			
			<!-- 短信验证码登录 -->
			<view v-if="currentTab === 1" class="input-group">
				<view class="input-item">
					<image src="/static/phone.png" class="icon" />
					<view class="input-wrapper" @tap="focusPhoneInput">
						<text class="input-text" :class="{'placeholder': !smsForm.phone}">{{smsForm.phone || '请输入手机号'}}</text>
						<input 
							class="hidden-input"
							type="number" 
							v-model="smsForm.phone" 
							:focus="phoneInputFocus"
							@blur="phoneInputFocus = false"
							@input="handlePhoneInput"
							maxlength="11"
						/>
					</view>
				</view>
				<view class="input-item verify-code">
					<image src="/static/verify.png" class="icon" />
					<view class="input-wrapper" @tap="focusCodeInput">
						<text class="input-text" :class="{'placeholder': !smsForm.code}">{{smsForm.code || '请输入验证码'}}</text>
						<input 
							class="hidden-input"
							type="number" 
							v-model="smsForm.code" 
							:focus="codeInputFocus"
							@blur="codeInputFocus = false"
							maxlength="6"
						/>
					</view>
					<text 
						class="send-code-text" 
						:class="{'disabled': countdown > 0 || !isValidPhone}"
						@tap="sendVerifyCode"
					>
						{{countdown > 0 ? `${countdown}s后重发` : '获取验证码'}}
					</text>
				</view>
			</view>
			
			<!-- 微信登录 -->
			<view v-if="currentTab === 2" class="wechat-login">
				<view class="wechat-tip">点击下方按钮使用微信一键登录</view>
				<button class="wechat-btn" @tap="handleWechatLogin">
					<uni-icons type="weixin" size="32" color="#ffffff" />
					微信一键登录
				</button>
			</view>
			
			<button v-if="currentTab !== 2" class="login-btn" @tap="handleLogin">登录</button>
			
			<view class="other-options">
				<text @tap="handleForgotPassword">忘记密码</text>
				<text @tap="handleRegister">注册账号</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { request } from '../../util/request.js';
	export default {
		data() {
			return {
				loginTabs: [
					{ name: '账号密码登录' },
					{ name: '短信验证码登录' },
					{ name: '微信登录' }
				],
				currentTab: 0,
				accountForm: {
					username: '',
					password: ''
				},
				smsForm: {
					phone: '',
					code: ''
				},
				countdown: 0,
				isValidPhone: false,
				phoneInputFocus: false,
				codeInputFocus: false
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index
			},
			handleLogin() {
				switch(this.currentTab) {
					case 0:
						if (!this.accountForm.username || !this.accountForm.password) {
							this.showMessage('请输入账号和密码')
							return
						}
						// TODO: 实现账号密码登录
						console.log('账号密码登录：', this.accountForm)
						break
					case 1:
						if (!this.smsForm.phone) {
							this.showMessage('请输入手机号')
							return
						}
						if (!this.isValidPhone) {
							this.showMessage('请输入正确的手机号')
							return
						}
						if (!this.smsForm.code) {
							this.showMessage('请输入验证码')
							return
						}
						// TODO: 实现短信验证码登录
						console.log('短信验证码登录：', this.smsForm)
						this.loginByPhone();
						break
					case 2:
						// 微信登录按钮已单独处理
						break
				}
			},
			showMessage(title, icon = 'none') {
				uni.showModal({
					title: '提示',
					content: title,
					showCancel: false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						}
					}
				});
			},
			focusPhoneInput() {
				this.phoneInputFocus = true
			},
			focusCodeInput() {
				this.codeInputFocus = true
			},
			handlePhoneInput(e) {
				const phone = e.detail.value;
				this.isValidPhone = /^1[3-9]\d{9}$/.test(phone);
			},
			async sendVerifyCode() {
				if (!this.isValidPhone) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				try {
					const resp = await request({
						url: 'owner-server/owner/login/sendVerifyCode',
						method: 'POST',
						data: this.smsForm.phone
					})
					console.log(resp);
					
					if (resp.code === 200) {
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						})
						this.countdown = 60
						const timer = setInterval(() => {
							this.countdown--
							if (this.countdown <= 0) {
								clearInterval(timer)
							}
						}, 1000)
					} else {
						uni.showToast({
							title: resp.message || '发送失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('发送验证码失败:', error)
					uni.showToast({
						title: '发送失败，请重试',
						icon: 'none'
					})
				}
			},
			async loginByPhone() {
				try {
					console.log('loginByPhone:' + this.smsForm.phone + " " + this.smsForm.code);
					const resp = await request({
						url: 'owner-server/owner/login/phone',
						method: 'POST',
						data: this.smsForm
					})
					console.log('登录响应:', resp);
					
					if (resp.code === 200) {
						// 保存token
						if (resp.data) {
							uni.setStorageSync('token', resp.data);
						}
						uni.showModal({
							title: '提示',
							content: '登录成功！',
							showCancel: false,
							success: () => {
								// 使用switchTab而不是reLaunch
								uni.switchTab({
									url: '/pages/index/index',
									success: () => {
										console.log('页面跳转成功');
									},
									fail: (err) => {
										console.error('页面跳转失败:', err);
										// 如果switchTab失败，尝试使用redirectTo
										uni.redirectTo({
											url: '/pages/index/index',
											fail: (redirectErr) => {
												console.error('redirectTo也失败了:', redirectErr);
												// 最后尝试使用navigateTo
												uni.navigateTo({
													url: '/pages/index/index'
												});
											}
										});
									}
								});
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: resp.msg || '登录失败',
							showCancel: false
						});
					}
				} catch (error) {
					
					console.error('登录失败:', error);
					uni.showModal({
						title: '提示',
						content: '登录失败，请重试',
						showCancel: false
					});
				}
			},
			handleWechatLogin() {
				// TODO: 实现微信登录逻辑
				this.showMessage('微信登录功能开发中')
			},
			handleForgotPassword() {
				this.showMessage('忘记密码功能开发中')
			},
			handleRegister() {
				this.showMessage('注册功能开发中')
			}
		}
	}
</script>

<style>
.login-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #4A90E2 0%, #87CEEB 100%);
	padding: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-box {
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 60rpx 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666666;
	text-align: center;
	margin-bottom: 40rpx;
}

.login-tabs {
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
	border-bottom: 2rpx solid #EEEEEE;
}

.tab-item {
	font-size: 28rpx;
	color: #666666;
	padding: 20rpx 0;
	position: relative;
}

.tab-item.active {
	color: #4A90E2;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -2rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #4A90E2;
	border-radius: 2rpx;
}

.input-group {
	margin-bottom: 40rpx;
}

.input-item {
	display: flex;
	align-items: center;
	height: 90rpx;
	border-bottom: 2rpx solid #EEEEEE;
	margin-bottom: 30rpx;
	position: relative;
}

.input-wrapper {
	flex: 1;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.input-text {
	font-size: 28rpx;
	color: #333;
	width: 100%;
}

.input-text.placeholder {
	color: #999;
}

.hidden-input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.send-code-text {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24rpx;
	color: #4A90E2;
	padding: 10rpx 0;
	line-height: 1;
	white-space: nowrap;
}

.send-code-text.disabled {
	color: #999999;
}

.verify-code {
	padding-right: 180rpx;
}

.input-item .iconfont {
	font-size: 40rpx;
	color: #999999;
	margin-right: 20rpx;
}

.wechat-login {
	text-align: center;
	margin-bottom: 40rpx;
}

.wechat-tip {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 30rpx;
}

.wechat-btn {
	width: 80%;
	height: 90rpx;
	background-color: #07C160;
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 45rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wechat-btn .iconfont {
	font-size: 40rpx;
	margin-right: 10rpx;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(90deg, #4A90E2 0%, #87CEEB 100%);
	color: #FFFFFF;
	font-size: 32rpx;
	border-radius: 45rpx;
	margin-bottom: 40rpx;
}

.other-options {
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	color: #666666;
}

.other-options text {
	padding: 10rpx;
}

.icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}
</style>
